<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<a-layout-sider
					style="flex: 0 0 415px;min-width: 415px;max-width: 415px;width: 415px;background: #ffffff !important;overflow-y:scroll">
				<div class="left-top">
					<div class="logoa1">
						<img src="../../assets/images/eventAnalyze/8.png"/>
					</div>
					<span @click="toView">事件追踪</span>
					<div class="logoa2">
						<div class="logoa2Img" @click="changePageAdd"></div>
						<span style="color: white;font-size: 14px;cursor: pointer;" @click="changePageAdd">事件创建</span>
					</div>
				</div>
				<div style="padding-left:30px;padding-top:15px">
					<a-tree
							v-if="treeData.length>0"
							:tree-data="treeData"
							:default-selected-keys="['0']"
							:defaultExpandAll="treeFlag"
							@select="treeSelect"
							ref="tree">
						<template slot="custom" slot-scope="item">
							<!--<span style="border:none" :title="item.title" :style="active_index==item.id?'color: rgb(23,119,255)':''" @click="onSelect(item)">{{ item.title?item.title.substring(0,10):'' }}</span>-->
							<div style="width: 100%;display: inline-block;margin-top: -1%;">
								<div style="border:none;display: inline-block;width: 30%;" :title="item.title"
								     :style="active_index==item.id?'color: rgb(23,119,255)':''" @click="onSelect(item)">
									{{ item.title ? item.title.substring(0, 10) : '' }}
								</div>
							</div>
							<!-- <div class="search" style="margin-left:20px" title="查看规则详情" @click="changePageRuleInfo"></div>
							 <div class="delete" style="margin-left:20px" title="删除" @click="deleteButton"></div>-->
							<div style="display: inline-block;margin-top: -1%;">
								<a-button style="border:none;background-color: transparent;"
								          :style="active_index==item.id?'':'display: none'"
								          @click="changePageRuleInfo(item)"><img src="../../assets/images/generalDetection/1.png"
								                                                 style=""/></a-button>
								<a-button class="but_type" style='border:none;background-color: transparent;padding-left: 5px;'
								          :style="active_index==item.id?'':'display: none'"
								          @click="deleteButton(item)"><img
										src="../../assets/images/generalDetection/delete.png" style=""/></a-button>
							</div>

						</template>
					</a-tree>
				</div>
			</a-layout-sider>
			<!-- 右侧列表页-->
			<Wlzp @func="getMsgFormSon" v-bind:parent="transfer_parent" v-bind:commandId="commandId"
			      v-bind:commandId2="commandId2" v-bind:oneEventType="oneEventType" v-bind:twoEventType="twoEventType"
			      v-bind:threeEventType="threeEventType" v-bind:eventName="eventName" v-bind:randomNumber="randomNumber"
			      v-bind:activeIndex="active_index" v-bind:queryLevel="queryLevel" v-if="wlzp"></Wlzp>
			<!-- 规则详情页-->
			<Info v-bind:parent="transfer_parent" v-bind:eventId="event_id" v-if="if_info"></Info>
			<!-- 规则新增页-->
			<Eventcreate v-bind:parent="transfer_parent" v-if="event_create"></Eventcreate>
			<!-- 列表详情页-->
			<EventAnalyzeInfo v-bind:parent="transfer_parent" v-bind:evenInfo="evenInfo" v-bind:queryLevel="queryLevel"
			                  v-if="eventAnalyze_info" v-bind:eventName="eventName" v-bind:commandId="commandId"
			                  v-bind:commandId2="commandId2" v-bind:activeIndex="active_index"></EventAnalyzeInfo>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {eventNameTreeData, remove} from '@/api/eventAnalyze/eventAnalyze'
import '@/utils/wordCloud'
import statistics from '@/views/eventAnalyze/eventAnalyzeStatistics.vue'
import wlzp from '@/views/eventAnalyze/eventAnalyze_1.vue'
import info from '@/views/eventAnalyze/eventAnalyzecreateinfo.vue'
import eventcreate from '@/views/eventAnalyze/eventAnalyzecreate.vue'
import eventAnalyzeInfo from '@/views/eventAnalyze/eventAnalyzeInfo.vue'

export default {
	name: "eventAnalyze",
	components: {
		left,
		rightTop,
		Statistics: statistics,
		Wlzp: wlzp,
		Info: info,
		Eventcreate: eventcreate,
		EventAnalyzeInfo: eventAnalyzeInfo,
	},
	data() {
		return {
			treeFlag: false, // 判断是是否展开
			transfer_parent: this, // 子页面 用的this
			randomNumber: undefined, // 子页面用的随机数
			wlzp: true,
			user: (JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')) : {
				'realName': "***"
			}), // 当前用户信息
			active_index: 0.1,// 判断是否高亮
			parent_active_index: 1,//判断树节点是否高亮
			commandId: 0, // 子页面用的commandId
			commandId2: 0, // 子页面用的commandId
			oneEventType: 0, // 子页面用的oneEventType
			twoEventType: 0, // 子页面用的twoEventType
			threeEventType: 0, // 子页面用的threeEventType
			eventName: '全部事件', // 子页面用的eventName
			queryLevel: {id: 0, level: 0}, // 查询统计需要的字段
			if_info: false,
			event_create: false,
			eventAnalyze_info: false,
			treeData: [], //树用的data
			event_id: {}, // 子页面用的event_id
			treeInfo: {}, // 通过key获取树节点信息
			onFlag: true, // 根据onFlag判断 是否取this.treeInfo的值
			evenInfo: {}, // 子组件传过来的值
		}
	},
	watch: {},
	methods: {
		toView() {
			this.$router.push({path: '/ruleSetting'})
		},
		//监听子组件传来的值
		getMsgFormSon(data) {
			this.wlzp = false;
			this.if_info = false;
			this.wlzp = false;
			this.eventAnalyze_info = true;
			// data就是子组件传过来的值
			this.evenInfo = data;
		},

		/**
		 *
		 * 点击树 触发的事件
		 */
		treeSelect(e) {
			// this.wlzp = true;
			// this.event_create = false;
			// this.if_info = false;
			// this.eventAnalyze_info =false;
			// 根据onFlag判断 是否取this.treeInfo的值
			// if(this.onFlag == true){
			this.recursiveFilter(this.treeData, e[0])
			if (this.treeInfo.commandId == null) {
				if (this.treeInfo.level == 1) {
					this.threeEventType = 0;
					this.twoEventType = 0;
					this.oneEventType = this.treeInfo.id;
				}
				if (this.treeInfo.level == 2) {
					this.threeEventType = 0;
					this.twoEventType = this.treeInfo.id;
					this.oneEventType = this.treeInfo.parentId;
				}
				if (this.treeInfo.level == 3) {
					this.threeEventType = this.treeInfo.id;
					this.twoEventType = this.treeInfo.parentId;
					this.oneEventType = this.treeInfo.oneParentId;
				}
				if (this.treeInfo.name == "全部") {
					this.eventName = "全部事件";
				} else {
					this.eventName = this.treeInfo.name;
				}

				let obj = {};
				obj.id = this.treeInfo.id;
				obj.level = this.treeInfo.level;
				this.queryLevel = obj;
				this.active_index = 0;
			}
			/*if(this.eventName == "全部事件" || this.eventName == "自定义事件"){
					this.active_index = 9999;
			}*/
		},
		// 通过key 获取树节点信息
		recursiveFilter(tree, keys) {
			let data = tree.filter(item => item.key == keys)
			if (data.length != 0) {
				this.treeInfo = data[0]
			} else {
				tree.map(item => {
					if (item.children) {
						//递归循环
						this.recursiveFilter(item.children, keys);
					}
				})
			}
			return data
		},

		// 规则详情页
		changePageRuleInfo(item) {
			this.wlzp = false;
			this.eventAnalyze_info = false;
			this.if_info = true;
			this.event_id = item;
			this.onFlag = false;
			// this.active_index = item.id;
			// this.commandId2 = item.commandId;
		},
		// 删除规则
		deleteButton(item) {
			this.onFlag = false;
			confirm('确定删除该记录吗？', () => {
				let id = [];
				id.push(item.id);
				remove(id).then(res => {
					this.$message.success("删除成功");
					this.treeList();
					this.eventName = '全部事件';
				})
			});
		},
		/**
		 * 点击有图标的子节点  自定义下的子节点
		 */
		onSelect(a) {
			this.event_create = false;
			this.if_info = false;
			this.eventAnalyze_info = false;
			this.wlzp = true;

			this.commandId = a.dataRef.commandId;
			this.commandId2 = a.dataRef.commandId;
			this.eventName = a.dataRef.name;
			this.randomNumber = Math.round(Math.random() * 5);
			this.active_index = a.dataRef.id;
		},
		/**
		 * 事件创建
		 */
		changePageAdd() {
			this.event_create = true;
			this.if_info = false;
			this.wlzp = false;
			this.eventAnalyze_info = false;
		},

		treeList() {

			// getRuleId().then(res => {
			// 	// 如果角色是普通业务人员
			// 	if (res.data == "ROLE.ORDINARY.BUSINESS") {
			// 		this.treeFlag = true;
			// 	}
			// });
			// 获取左侧树
			eventNameTreeData().then(res => {
				parseTreeJson(res.data.children);

				/* 参数
			 * array 树结构 查找所有叶子节点
			 */
				function parseTreeJson(treeData) {
					for (let index = 0; index < treeData.length; index++) {
						const element = treeData[index];
						// 1.判断element.children是对象
						if (element.children && typeof (element.children) == 'object') {
							parseTreeJson(element.children)
						} else {
							// 判断是否为子节点
							if (element.children == null && element.type == 2) {
								element.scopedSlots = {title: 'custom'};
							}
						}
					}
				}

				this.treeData = [];
				this.treeData.push(res.data);
				if (res.data.children[0].children.length <= 0 && this.treeFlag == true) {
					this.$message.success("请添加规则信息");
				}
			});
		}
	},

	mounted() {
		this.treeList();

	},

}
</script>

<style scoped lang="scss">
.delete {
	background: url("../../assets/images/generalDetection/delete.png") no-repeat;
	width: 20%;
	height: 100%;
	cursor: pointer;
}

.search {
	background: url("../../assets/images/generalDetection/1.png") no-repeat;
	width: 20%;
	height: 100%;
	cursor: pointer;
}

/deep/ .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
	color: #1677ff;
	width: 30px;
	height: 30px
}

/deep/ :root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-icon, :root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .ant-select-switcher-icon {
	font-size: 18px
}

.left-top {
	height: 60px;
	font-size: 16px;
	display: flex;
	align-items: center;
	background-color: rgb(23, 119, 255);
	width: 100%;

	.logoa1 {
		margin: 0 25px 0 25px;
	}

	.logoa2Img {
		width: 20%;
		height: 20%;
		background: url("../../assets/images/generalDetection/addChart.png") left center no-repeat;
		display: inline-block;
		margin-left: 22%;
		cursor: pointer;
	}

	.logoa2 {
		height: 100%;
		width: 25%;
		margin-left: 38%;
	}

	span {
		line-height: 60px;
		color: #ffffff;
	}
}


/*.overflow{*/
/*  overflow: hidden;*/
/*  white-space: nowrap;*/
/*  text-overflow: ellipsis;*/
/*}*/

.modal-box /deep/ .ant-modal-body {
	min-height: 194px;
}

.modal-box /deep/ .ant-modal-content {
	height: 300px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	/*border: solid #F0F0F0 1px;*/
	/*text-align: center;*/
	/*padding-left: 1%;*/
	/*padding-right: 1%;*/
	/*margin-right: 1%;*/
	margin: 0 4.5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

input[type=checkbox]:checked + label:before { /*before为伪元素可以在元素之后添加内容*/
	display: block;
	/*	css3中的content字符编码*/
	content: "";
	/*	复选框里面的&radic;居中*/
	text-align: center;
	/*	复选框里面的&radic;大小*/
	font-size: 13px;
	/*	字体的颜色*/
	color: #3D8EF7;
	/*  复选框勾选后的背景颜色*/
	background: #3D8EF7;
	margin-left: 3px;
	margin-top: 3px;
	height: 10px;
	width: 10px;
}

input[type=checkbox] {
	/* visibility 属性规定元素是否可见*/
	visibility: hidden;
}

.checkboxClass {
	width: 18px;
	height: 18px;
	line-height: 18px;
	cursor: pointer;
	position: relative;
	border: 1px solid #ccc; /*改变复选框的边框颜色也可以不要边框*/
	display: inline-block;
}

.topDiv {
	border-bottom: 1px solid #dcdcdc;
	width: 90%;
	height: 60px;
	margin-left: 5%;
	padding-left: 10px;
	line-height: 60px;
	display: flex
}

.titleDiv {
	height: 40px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin-left: 5%;
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

/deep/ .ant-timeline-item-head-custom {
	background: transparent !important;
}

.angle-wrapper:before {
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-right-color: #eeeeee;
	position: absolute;
	left: calc(-2% - 5px);
	top: 50%;
	margin-top: -12px;
}

.angle-wrapper:after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #FFFFFF;
	position: absolute;
	left: calc(-2% - 1px);
	top: 50%;
	margin-top: -10px;
}

.angle-wrapper {
	width: 93%;
	height: 40px;
	position: relative;
	border: 2px solid #eeeeee;
	margin-left: 2%;
	background-color: white;
	line-height: 30px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.angle-wrapper-bottom {
	display: flex;
	margin-top: 5px;
	justify-content: space-between;
	width: 70%;
	font-size: 12px;
	margin-left: 4%
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

/deep/ .ant-table-tbody > tr:nth-child(even) {
	background-color: #FAFAFA;
}

/deep/ .ant-table-tbody > tr > td {
	border: 0;
}

/deep/ .ant-table-thead > tr > th {
	background-color: white;
	font-weight: bold;
}

.ant-btn-primary {
	color: #ffffff;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
	background-color: rgb(158, 213, 250) !important;
}

/* /deep/ .ant-tree-node-content-wrapper{
		 width: 90%;
 }*/

/deep/ .ant-tree-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/deep/ .ant-tree-node-content-wrapper {
	width: 85%;
	/*color: rgb(23,119,255);*/
	background-color: transparent;
}

/*/deep/ .ant-tree li{*/
/*    background-color: transparent;*/
/*    color: rgb(23,119,255);*/
/*}*/

/deep/ .ant-tree-node-selected {
	background-color: transparent;
	color: rgb(23, 119, 255);
}
</style>
